<!--注册-->
<template>
  <div class="register-container">
    <section class="form-container">
      <div class="manage-tip">
        <span class="title">系统注册</span>
        <el-form :model="registerFormDTO" status-icon :rules="rules" ref="registerForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="账号" prop="userAccount">
            <el-input v-model="registerFormDTO.userAccount" placeholder="请输入账户"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="registerFormDTO.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPwd">
            <el-input type="password" v-model="registerFormDTO.userPwd" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPassword">
            <el-input type="password" v-model="registerFormDTO.checkPassword" autocomplete="off" placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="submitForm('registerForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'register',
  components: {},
  data () {
    /*
    * 校验
    */
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerFormDTO.userPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerFormDTO: {
        userAccount: '',
        userPwd: '',
        userName: ''
      },
      rules: {
        userAccount: [{
          require: true,
          message: '账号不能为空',
          trigger: blur()
        },
        {
          min: 2,
          max: 20,
          message: '长度在2-30之间',
          trigger: blur()
        }],
        userName: [{
          require: true,
          message: '用户名不能为空',
          trigger: blur()
        },
        {
          min: 2,
          max: 20,
          message: '长度在2-30之间',
          trigger: blur()
        }],
        userPwd: [{
          require: true,
          message: '密码不能为空',
          trigger: blur()
        },
        {
          min: 6,
          max: 30,
          message: '长度在6-30之间',
          trigger: blur()
        }],
        checkPassword: [{
          require: true,
          message: '密码不能为空',
          trigger: blur()
        },
        {
          min: 6,
          max: 30,
          message: '长度在6-30之间',
          trigger: blur()
        }, {
          validator: validatePass2
        }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('users/register', this.registerFormDTO)
            .then(res => {
              if (res.data.code === '200') {
                //  注册成功
                this.$message({
                  message: '账号注册成功',
                  type: 'success'
                })
                this.$router.push('/login')
              } else {
                this.$message({
                  message: '账号注册失败',
                  type: 'fail'
                })
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .register-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../assets/bg.jpeg") no-repeat center center;
    background-size: 100%;
  }

  .form-container {
    border-radius: 5px;
    height: 400px;
    width: 380px;
    padding: 20px 70px 10px 10px;
    top: 20%;
    left: 36%;
    position: absolute;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    text-align: center;
  }
  .form-container .manage-tip .title{
    font-family: 'Microsoft YaHei';
    font-weight: bold;
    font-size: 30px;
    color: #fff;
  }
</style>
